<template>
  <div class="reply">
    <!-- 顶部 -->
    <van-cell center>
      <van-icon name="cross" slot="icon" color="#5e95e7" @click="$emit('closePop')"/>
      <p slot="default" class="title">{{commentInfo.reply_count}}条回复</p>
    </van-cell>
    <div class="comments">
       <!-- 被回复的内容 -->
      <comment-item :commentInfo="commentInfo"/>
      <!-- 全部回复 -->
      <p class="allTitle">全部评论</p>
      <article-comment 
      type="c" 
      :sourceId="commentInfo.com_id" 
      :commentInfo="replyComment"
      />
    </div>
    <div class="footerButton" @click="isShowPop=true">
      <van-button type="default" round >写回复</van-button>
    </div>
    <van-popup 
    v-model="isShowPop"
    position="bottom"
    >
      <publish-comment 
      v-show="isShowPop" 
      :target="commentInfo.com_id"
      :artId="articleId"
      @loadSuccess="getReplyComment"
      />
    </van-popup>
  </div>
</template>

<script>
import commentItem from './commentItem.vue';
import ArticleComment from './ArticleComment.vue';
import PublishComment from './PublishComment.vue';
export default {
  inject:{
    articleId: {
      type: [Number,String,Object],
      required: true
    }
  },
  props:{
    commentInfo:{
      type: Object,
      required: true
    }
  },
  components: {
    commentItem,
    ArticleComment,
    PublishComment
  },
data(){
  return {
    count: 0,
    isShowPop: false,
    replyComment: []
  }
},
methods: {
  getReplyComment(obj){
    //追加数据
    this.replyComment.unshift(obj.new_obj)
    this.commentInfo.reply_count++
    //将回复数自增
    // this.count++
    //关闭弹出层
    this.isShowPop = false
  }
}
}
</script>

<style scoped lang="less">
.reply{
  .van-cell__value--alone{
    text-align: center;
  }
  .title{
    font-size: 32px;
  }
  .allTitle{
    margin: 20px 0;
    font-size: 32px;
    padding-left: 24px;
  }
  .footerButton{
    display: flex;
    height: 88px;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #787878;
    .van-button{
      width: 60%;
      height: 80%;
      font-size: 28px;
    }
  }
  .comments{
    position: fixed;
    top: 88px;
    bottom: 88px;
    left: 0;
    right: 0;
    overflow: auto;
  }
}
</style>